<template>
    <div class="vue-flow-container" :style="{ height: chartHeight + 'px', width: '100%' }">
        <VueFlow :nodes="nodes" :edges="edges" />
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineExpose } from "vue";
import { useFlowNodeTable } from "../../hooks/FlowManager/useFlowNodeTable";
import { VueFlow, Position } from '@vue-flow/core'
import type { Node, Edge } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';

let receivedProps = defineProps(['flowId', 'direction', 'chartWidth']);

let nodes = ref<Node[]>([]);
let edges = ref<Edge[]>([]);

let { flowNodeTable, getFlowNode } = useFlowNodeTable();
if (receivedProps.flowId) {
    loadChart(receivedProps.flowId);
}
let nodeHeight = 40;//节点框的高度
let nodeWidth = 100;//节点框的宽度
let heightInterval = 20;//节点纵向之间的间隔
let widthInterval = 40;//节点纵向之间的间隔

let chartHeight = ref(0);//流程图容器默认高度
//横向展示的时候先设置一个默认高度，防止为空
if (receivedProps.direction == "h") {
    chartHeight.value = 80;
}
function loadChart(flowId) {
    //先清空
    nodes = ref<Node[]>([]);
    edges = ref<Edge[]>([]);

    if (flowId) {
        getFlowNode(flowId).then(() => {
            /*------------流程图开始------------*/
            let px = 20;
            let py = 20;
            if (receivedProps.direction == "v") {
                px = (receivedProps.chartWidth - nodeWidth) / 2;
                chartHeight.value += 20;
            }
            if (receivedProps.direction == "h") {
                chartHeight.value = nodeHeight + heightInterval + 20;
            }

            flowNodeTable.tableData.forEach((node, index) => {
                //节点
                nodes.value.push({
                    id: node.id,
                    position: { x: px, y: py },
                    data: { label: node.nodeName },
                    style: receivedProps.direction == 'v' ? { height: nodeHeight + 'px', width: nodeWidth + 'px' } : { height: nodeHeight + 'px', width: nodeWidth + 'px', paddingTop: '4px', paddingBottom: '4px' },
                    sourcePosition: receivedProps.direction == 'v' ? Position.Bottom : Position.Right,
                    targetPosition: receivedProps.direction == 'v' ? Position.Top : Position.Left
                });

                //边
                if (index > 0) {
                    edges.value.push({
                        id: (index - 1) + '-' + index,
                        source: flowNodeTable.tableData[index - 1].id,
                        target: node.id,
                        animated: true
                    })
                }
                if (receivedProps.direction == "v") {
                    py = py + nodeHeight + heightInterval;
                    chartHeight.value += nodeHeight + heightInterval
                }
                if (receivedProps.direction == "h") {
                    px = px + nodeWidth + widthInterval;
                }
            });
            /*------------流程图结束------------*/
        });
    }
}
defineExpose({ loadChart });
</script>